<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="layout">
    <Tabs :data="['基础设置', '流程设计']" @on-tab="handleTab" @on-save="handleSave"
      :mData="mData" :tab="tab" />
    <component :is="currentTabComponent" :mData="mData" @on-mode="handleMode" ref="divToCapture"/>

<!--    <button @click="captureDiv">转换为图片</button>-->
<!--    <img v-if="capturedImage" :src="capturedImage" alt="转换后的图片" />-->

<!--    <el-drawer title="生成JSON" v-model="generateJsonVisible" size="70%" :style="zoomScaleStyle" destroy-on-close-->
<!--      :modal-append-to-body="false">-->
<!--      <v-json-editor v-model="modelJsonPreview" :options="editorOptions" :style="styles"></v-json-editor>-->
<!--    </el-drawer>-->
  </div>
</template>

<script>
import Tabs from './Tabs.vue'
import { BaseSet } from '../baseset'
import apiProc from '../api/proc'

import curdMixin from '@/framework-core/mixins/crud';

import { Flowable } from '../flowable/index'
// import { FormDesign } from '../form/index'
// import transformMixin from '@/framework-code/utils/transform'
 import { Base64 } from 'js-base64'
import html2canvas from 'html2canvas';
export default {
  // mixins: [transformMixin],
  components: {
    Tabs,
    BaseSet,
    // FormDesign,
    Flowable
  },
  data() {
    return {
      capturedImage:"",
      modelJsonPreview: {},
      generateJsonVisible: false,
      tab: 0,
      wfSimpleProc: null, // 基础设置
      wfSimpleTaskInfo: null, // 流程设计
      mData: null,
      microOpen: 'false',
      id: null,//flowId
      editorOptions: {
        mode: 'code'
      },
      styles: {
        flex: 1,
        height: 100 + '%'
      }
    }
  },
  computed: {


    currentTabComponent() {
      switch (this.tab) {
        case 1:
          return 'Flowable'
        default:
          return 'BaseSet'
      }
    },
    zoomScaleStyle() {
      if (document.documentElement.style.zoom) {
        let scale = 1 / document.documentElement.style.zoom
        return 'zoom:' + scale + ''
      }
      return ''
    }
  },
  created() {
   // this.microOpen = this.$route.query.microOpen ? this.$route.query.microOpen : this.microOpen
    const { query } = this.$route
    if (query && query.flowId) {
      this.id = query.flowId
      this.procModelGet({ id: query.flowId })
    } else {
      this.procModelGet()
    }
  },
  methods: {
    async captureDiv() {
      try {

        //document.documentElement.querySelector(".el-button")[0].style.display = 'none';
        let elements= document.getElementsByClassName("el-button")
        for (var i = 0; i < elements.length; i++) {
          elements[i].style.display = 'none';
        }

        const canvas = await html2canvas(document.documentElement.querySelector(".flowable"));
        //this.capturedImage = canvas.toDataURL('image/png');

        for (var i = 0; i < elements.length; i++) {
          elements[i].style.display = 'block';
        }
      } catch (error) {
        console.error('转换出错:', error);
      }
    },
    async procModelGet(params) {
      try {
        const { data } = await apiProc.apiProcModelGet(params)

        if (data.success) {
          console.log(data)
          this.mData = data.data.data
          if (!this.id &&  this.mData?.wfSimpleProc?.id) {
            this.id =  this.mData.wfSimpleProc.id
          }
        }
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    async procModelSave(postdata, isTip = false) {
      try {
        debugger
       // alert(JSON.stringify(postdata))
        let wfSimpleDefaultModel = Base64.encode(JSON.stringify(postdata))
        let map = {}
        map.wfSimpleDefaultModel = wfSimpleDefaultModel
        const { data } = await apiProc.apiProcModelSave(map)
        if (data.success) {
          this.mData = data.data.data;
          if (isTip) {
            this.$message.success('模型已成功保存！')
          }
        }
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    async procModelPublish() {
      try {
        const result = await this.$confirm('确定要发布此流程吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        if (result) {
          if (this.mData?.wfSimpleProc?.complexProcId) {
            const { data } = await apiProc.apiProcModelPublish2(this.mData?.wfSimpleProc?.complexProcId)
            if (data.success) {
              this.$message.success('模型已成功发布！')
              if (this.microOpen === 'false') {
                setTimeout(() => {
                  this.$router.push({
                    path: '/oa'
                  })
                }, 2000)
              }
            }
          } else {
            const procId = await this.getProcId()
            if (procId) {
              const { data } = await apiProc.apiProcModelPublish(procId)
              if (data.success) {
                this.$message.success('模型已成功发布！')
                if (this.microOpen === 'false') {
                  setTimeout(() => {
                    this.$router.push({
                      path: '/oa'
                    })
                  }, 2000)
                }
              }
            }
          }
        }
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },

    async getProcId() {
      await this.procModelSave(this.mData)
      const { wfSimpleProc } = this.mData
      const procId = wfSimpleProc?.id ? wfSimpleProc.id : ''
      return procId
    },
    handleTab(item, i) {

      if (i == 1) {
        if(  !this.mData.wfSimpleProc  || !this.mData.wfSimpleProc.id){
          this.$message.error('请先保存基础信息！')
          this.tab = 0
          return;
        }
      }
      if (i == 0) {
        this.procModelGet({ id: this.id })
      }
      this.tab = i
    },
    handleSave(type) {
      switch (type) {
        case 'publish':
          this.procModelPublish()
          break
        default:
          this.procModelSave(this.mData, true)
      }
    },
    handleMode(type, val) {
      console.log(val)
      this.mData[type] = val
    }
  }
}
</script>

<style scoped lang="scss">
.layout {
  /* height: 100%;
  overflow-y: auto; */
  min-height: 500px;
}
</style>
